<template>
    <el-cascader
        :options="options"
        change-on-select
        @change="handleChangeEvent"
        >
    </el-cascader>
</template>
<script>
    import {Cascader} from "element-ui";
    import mergeRouter from "../../utils/settings/mergeRouter";
    import {mapGetters} from "vuex";
    import "./index.css";
    // import Vue from "vue";
    // Vue.use(Cascader);
    export default {
        props: {
            //当输入框里的值发生变化时的回调函数
            changeEvent: {
                type: Function,
                default: () => {}
            }
        },
        data() {
            return {
                options: []
            }
        },
        computed: {
            ...mapGetters("cjy", [
                "classifyData"
            ]),
            getClassifyData() {
                return this.classifyData;
            }
        },
        methods: {
            FirstCapital(str) {
                return str.slice(0, 1).toUpperCase();
            },
            //定义正则表达式对象
            regObject() {
                return {
                    isCust(value) {
                        let reg = /^cust.*$/;
                        return reg.test(value);
                    }
                }
            },
            initOptions() {
                let currentRouter = mergeRouter();
                let opt = [
                    {
                        label: "分类页面",
                        value: "分类",
                        id: "classify",
                        children: []
                    },
                    {
                        label: "自定义页面",
                        value: "自定义",
                        id: "cust",
                        children: []
                    },
                    {
                        label: "商品详情页",
                        value: "商品详情",
                        id: "detail",
                    },
                    {
                        label: "其他页面",
                        value: "其他",
                        id: "other",
                        children: []
                    },
                ];
                
                //填充分类的配置页面
                Array.isArray(this.getClassifyData) && this.getClassifyData.forEach((parentItem, index) => {
                    let parent = {
                        label: parentItem.goodsclassname,
                        value: parentItem.goodsclasscode,
                        id: parentItem.goodsclasscode,
                    }
                    //配置二级分类
                    //清除第一个分类，第一个分类为全部(即为本身)
                    parentItem.secList.shift();
                    parentItem.secList.forEach(childItem => {
                        if (!parent.children) {
                            parent.children = [];
                        }
                        let child = {
                            label: childItem.goodsClassName,
                            value: childItem.goodsclasscode,
                            id: childItem.goodsClassName,
                        }
                        parent.children.push(child);
                    });
                    opt[0].children.push(parent);
                });
                //其他页面赋值
                //移除自定义页面
                for (let i = currentRouter.length - 1; i > 0; i--) {
                    if (this.regObject().isCust(currentRouter[i].path)) {
                        currentRouter.splice(i, 1);
                    }
                }
                console.log("currentRouter", currentRouter);
                currentRouter.forEach((item, index) => {
                    let obj = {
                        label: item.name,
                        value: item.name
                    }
                    opt[3].children.push(obj);
                });
                this.options = opt;
            },
            handleChangeEvent(arr) {
                console.log(arr);
                let group = arr[0];
                //分类、其他
                let path;
                switch (group) {
                    case "分类":
                        //对于分类页面来说，arr[0]是分类组名，arr[1]是一级分类编码，arr[2]是2级分类编码
                        path = `goodsClassify?classCode=${arr[2] ? arr[2] : arr[1]}`;
                        break;
                    case "其他":
                        path = ``;
                        break;
                    default:
                        break;
                }
                this.changeEvent(path);
            }
        },
        components: {
            "el-cascader": Cascader
        },
        created() {
            this.initOptions();
        }
    }
</script>
<style scoped>
</style>

